<template>
  <div>
    <div class="banner" @click="bannerClick" ref="banner">
      <div class="img-wapper">
        <img :src="bannerImgs[0]" alt v-if="bannerImgs" />
      </div>
      <div class="info">
        <div class="info-img">
          <span class="iconfont icon-img">&#xe6df;</span>
          {{bannerImgLength}}
        </div>
        <p v-if="title">{{title}}</p>
      </div>
      <router-link to="./" tag="div" class="back" v-show="bannerBack">
        <span class="iconfont icon-back">&#xe647;</span>
      </router-link>
      <div class="shadow"></div>
    </div>
    <banner-gallery v-show="showGallery" @hideGallery="hideGallery" :galleryImg="galleryImg"></banner-gallery>
  </div>
</template>

<script>
import BannerGallery from "@/page/common/gallery/Gallery";
import { mapState } from "vuex";
export default {
  name: "DetailBanner",
  data() {
    return {
      showGallery: false,
      galleryImg: [],
      bannerHeight: 0
    };
  },
  props: {
    bannerImgs: {
      type: Array,
      required: true
    },
    title: String
  },
  watch: {
    bannerImgs(newVal, oldVal) {
      this.galleryImg = newVal;
    }
  },
  computed: {
    bannerImgLength() {
      return this.galleryImg.length;
    },
    ...mapState(["bannerBack"])
  },
  methods: {
    bannerClick() {
      this.showGallery = true;
    },
    hideGallery() {
      this.showGallery = false;
    }
  },
  components: {
    BannerGallery
  }
};
</script>

<style lang="stylus" scoped>
.banner
  width: 100%
  position: relative
  .img-wapper
    width: 100%
    height: 0
    padding-bottom: 68%
    overflow: hidden
    background: #ccc
    img
      width: 100%
  .info
    position: absolute
    left: 0.2rem
    bottom: 0.4rem
    .info-img
      width: 1.2rem
      height: 0.4rem
      background: rgba(0, 0, 0, 0.5)
      line-height: 0.4rem
      text-align: center
      border-radius: 0.2rem
      color: white
    p
      font-size: 0.36rem
      color: white
      text-shadow: 0 1px 2px rgba(0, 0, 0, 0.7)
  .back
    position: absolute
    left: 0.2rem
    top: 0.2rem
    width: 0.72rem
    height: 0.72rem
    border-radius: 50%
    background: rgba(0, 0, 0, 0.5)
    text-align: center
    line-height: 0.72rem
    .icon-back
      color: white
      font-size: 0.36rem
  .shadow
    width: 100%
    height: 0.4rem
    background-color: transparent
    background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.8))
    position: absolute
    left: 0
    bottom: 0
</style>